<template>
  <div class="dialog-boxss">
    <el-dialog v-model="state.isShow" :close-on-click-modal="clickModal" :width="props.width"
      :align-center="alignCenter" @close="close" :top="props.top">
      <template v-slot:header>
        <div class="dialog-header">{{ props.title }}</div>
      </template>
      <!-- <div v-slot:header>{{ props.title }}</div> -->
      <!-- <div slot="header" class="dialog-header">{{ props.title }}</div> -->
      <span>
        <slot name="dialogMain"></slot>
      </span>
      <template v-slot:footer>
        <span slot="footer" class="dialog-footer" v-if="showFooter">
          <div v-if="props.isFooterSlot" class="footer-box">
            <el-button @click="state.isShow = false" v-if="props.isShowCacel">{{
              props.cacelName
            }}</el-button>
            <el-button type="primary" @click="sure" v-if="props.isShowSave">{{
              props.sureName
            }}</el-button>
          </div>
          <slot v-else name="dialogFooter"></slot>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, computed, reactive, toRefs, ref } from "vue";

  // 组件配置
  defineOptions({
    name: 'DialogBox'
  })

  let props = defineProps({
    isDialog: {
      type: Boolean,
      default: false,
    },
    clickModal: {
      type: Boolean,
      default: false,
    },
    alignCenter: {
      type: Boolean,
      default: false,
    },
    showFooter: {
      type: Boolean,
      default: false,
    },
    isFooterSlot: {
      type: Boolean,
      default: false,
    },
    isShowCacel: {
      type: Boolean,
      default: true,
    },
    isShowSave: {
      type: Boolean,
      default: true,
    },
    width: {
      type: String,
      default: "60%",
    },
    top: {
      type: String,
      default: "15vh",
    },
    title: {
      type: String,
      default: "提示",
    },
    cacelName: {
      type: String,
      default: "取消",
    },
    sureName: {
      type: String,
      default: "确定",
    }
  });

  // 是否关闭
  const isClose = ref(true);

  let state = reactive({
    isShow: props.isDialog,
  });
  const handleOpen = () => {
    isClose.value = true;
    state.isShow = true;
  };
  const handleClose = (noClose: boolean = false) => {
    isClose.value = noClose;
    state.isShow = false;
  };
  defineExpose({
    handleOpen,
    handleClose,
  });
  const emit = defineEmits(['close', 'sureHandle'])
  const close = () => {
    if (isClose.value) emit('close')
  };
  const sure = () => {
    emit('sureHandle')
  };
</script>

<style lang="scss" scoped>
  .dialog-boxss {

    // border-radius: 10px;
    // overflow: hidden;
    ::v-deep(.el-dialog) {
      border-radius: 10px;
      overflow: hidden;
      padding: 0;

      .el-dialog__header {
        padding: 0;
        background: #1b65b9;

        .dialog-header {
          width: fit-content;
          height: 40px;
          line-height: 40px;
          padding: 0 40px 0 10px;
          box-sizing: border-box;
          background: #3ca0f6;
          color: #ffffff;
          margin-left: -2px;
          font-size: 16px;
          font-family: Microsoft YaHei, Microsoft YaHei-Bold;
          font-weight: 700;
          -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 70% 0%);
        }

        .el-dialog__headerbtn {
          width: 40px;
          height: 40px;
          // top: 12px;
          color: #fff;
        }

        .el-dialog__headerbtn .el-dialog__close,
        .el-dialog__headerbtn:focus .el-dialog__close,
        .el-dialog__headerbtn:hover .el-dialog__close {
          color: #fff;
          font-size: 18px;
        }
      }

      .el-dialog__body {
        padding: 30px 20px;
        box-sizing: border-box;
        word-break: break-all;
      }

      .el-dialog__footer {
        padding: 10px 20px 20px;
        box-sizing: border-box;

        .footer-box {
          display: flex;
          justify-content: center;
        }
      }
    }
  }
</style>
